<template>
  <el-dialog
      title="分配权限"
      :visible.sync="dialogTreeVisible"
      width="400px"
      :append-to-body="true"
      :close-on-click-modal="false"
   >
    <el-tree
        style="width: 100%; height: 400px; overflow: auto"
        :data="treeData"
        ref="tree"
        node-key="id"
        show-checkbox
        :check-strictly="true"
        :default-expand-all="false"
        :highlight-current="true"
        :default-checked-keys="rolePermissions.menuIds"
        @check-change="selectedNodes"
        :props="defaultProps">
    </el-tree>
    <el-button @click="dialogTreeVisible = false">取 消</el-button>
    <el-button type="primary" @click="addPermission">确 定</el-button>
  </el-dialog>
</template>

<script>
import {addPermission} from "@/api/role";
export default {
  name: "PermissionDialog",
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'menuName'
      }
    }
  },
  computed: {
    dialogTreeVisible: {
      get() {
        return this.$store.state.role.dialogTreeVisible;
      },
      set(value) {
        this.$store.state.role.dialogTreeVisible = value;
      }
    },
    treeData: {
      get() {
        return this.$store.state.role.treeData;
      },
      set(value) {
        this.$store.state.role.treeData =value;
      }
    },
    rolePermissions: {
      get() {
        return this.$store.state.role.rolePermissions;
      },
      set(value) {
        this.$store.state.role.rolePermissions =value;
      }
    }
    ,
    assignPermission: {
      get() {
        return this.$store.state.role.assignPermission;
      },
      set(value) {
        this.$store.state.role.assignPermission =value;
      }
    }
  },
  methods: {
    selectedNodes() {
      this.assignPermission = this.$refs.tree.getCheckedNodes().map((item) => {return item.id});
    },
    addPermission() {
      // if (this.$store.state.role.rolePermissions) {
      //
      // }
      var params = {
        roleId: this.$store.state.role.roleId,
        id: this.$store.state.role.rolePermissions === null ? null : this.$store.state.role.rolePermissions.id ,
        menuIds: this.assignPermission
      }
      addPermission(params).then((res) => {
        this.$message.success(res.data.msg);
        this.dialogTreeVisible = false;
      })
    }
  }
}
</script>

<style scoped>

</style>
